<template>
	<view class="search-page">
		<!-- <view class="zhan1"></view> -->
		<view class="zhan1" style="background:#ffffff"></view>
		<view class="search-top">
			<input class="search-input iconfont" :placeholder="placeholder" placeholder-style="color:#666666;" confirm-type="search" @confirm="search" v-model="input">
			<span class="text" @tap="back">取消</span>
		</view>
		<view class="search-content" v-show="show">
			<span class="name">热门搜索</span>
			<view class="box">
				<span class="item" v-for="(item,index) in list" :class="item.addClass" @tap="select(index)">{{item.name}}</span>
			</view>
		</view>
		<view class="result-box" v-show="isAcrive">
			<view class="menu-box">
				<span class="item" v-for="(item,index) in list1" :class="item.addClass" @tap="select1(index)">{{item.name}}</span>
			</view>
		</view>
		<view class="data-box" v-show="active==0">
			<view class="main-content">
				<view class="item" v-for="(item,index) in courseList" @tap="goPage('../course/content?id='+item.privateId)">
					<image :src="item.photo" class="img"></image>
					<view class="right">
						<span class="title">{{item.title}}</span>
						<span class="number">总学时:{{item.classHours}}</span>
						<span class="iconfont iconren2">{{item.watchCount}}</span>
						<view class="go" @tap.stop="goPage('../course/content?id='+item.privateId)">查看课程</view>
					</view>
				</view>
				<nodata v-show="start1 && courseList.length==0"></nodata>
			</view>
		</view>
		<view class="data-box" v-show="active==1">
			<view class="main-content">
				<view class="news-main" id="news-main" data-src="news-main">
					<view class="news-content">
						<view class="news-item" v-for="(item,index) in newsList" @tap="goPage('newsContent?id='+item.id)">
							<span class="name">{{item.title}}</span>
							<span class="time iconfont iconrili" :class="item.icon">{{item.createDate}}</span>
						</view>
						<nodata v-show="start2 && newsList.length==0"></nodata>
					</view>
				</view> 
			</view>
			
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata.vue'
	export default {
		components: {nodata},
		data() {
			return {
				placeholder:'\ue60c 输入内容',
				isAcrive:false,
				list:[
					{name:'高数',addClass:''},
					{name:'微积分',addClass:''},
					{name:'化学',addClass:''},
					{name:'大学生活',addClass:''},
					{name:'物理领域',addClass:''},
				],
				courseList:[
					
				],
				newsList:[],
				list1:[
					// {name:'贵州地矿',addClass:'active'},
					{name:'培训课程',addClass:'active'},
					{name:'培训动态',addClass:''},
				],
				active:0,
				input:'',
				show:false,
				pageSize:10,
				total1:null,
				pageNo:1,
				fs:'d',
	            fee:'',
	            paixu:'4',
	            total:null,
	            type1:'',
	            fee:'',
	            vipType:'',
	            start1:false,
	            start2:false,
	            type:'1270613275899019264'
			}
		},
		onLoad() {

		},
		methods: {
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			search(){
				this.isAcrive = true;
				if(this.active==0){
					this.getList1();
				}
				else{
					this.getList2();
				}
			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				
			},
			select(index){
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active"
					}
					else{
						item.addClass = ""
					}
				})
			},
			getList1(){
	            let that = this;
	            this.$http.get("/f/coursePage?classifyId="+this.type1+"&paixu="+this.paixu+"&fs="+this.fs+"&priceFlag="+this.fee+"&pageNo="+this.pageNo+"&pageSize="+this.pageSize+"&courseName="+this.input)
	            .then(function (response) {
	                let list = response.data.coursePage.list;
	                that.total = response.data.coursePage.count;
	                if(list.length!=0){
	                    list.forEach((item,i)=>{
	                        item = Object.assign(item,item.courseInfo)
							item.photo = that.$url + item.photo;
	                    })
	                }
	                that.courseList = list;
	                that.start1 = true;
	            })
	            .catch(function (error) {
	                // handle error
	                console.log(error);
	            })
	        },
	        getList2(){
	        	let that = this;
	        	this.$http.get("/f/pageNews?pageNo="+this.pageNo+"&pageSize="+this.pageSize+"&classifyId="+this.type+"&title="+this.input)
	            .then(function (response) {
	                let list = response.data.dtoPage.list;
	                that.newsList = list;
	                that.start2 = true; 
	                  
	            })
	            .catch(function (error) {
	                  // handle error
	                  console.log(error);
	            })
	        },
			select1(index){
				this.active = index;
				this.list1.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
						this.search();
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.search-page{
		width:100%;
		height:100%;
		overflow:hidden;
		.data-box{
			width:100%;
			height:calc(100% - 220rpx);
			.news-main{
				width:100%;
				.news-content{
					width:100%;
					box-sizing:border-box;
					padding-left:0rpx;
					.news-item{
						width:100%;
						border-bottom: 1px #d0d0d0 dashed;
						padding-bottom:20rpx;
						padding-top:20rpx;
						.name{
							width:95%;
							display:block;
							line-height:40rpx;
							font-size:30rpx;
							color:#555555;
							
						}
						.time{
							width:100%;
							display:block;
							line-height:40rpx;
							font-size:28rpx;
							color:#999999;
							overflow:hidden;
							margin-top:10rpx;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
						.time:before{
							color:#1783dd;
							font-size:40rpx;
							margin-right:10rpx;
							position:relative;
							top:4rpx;
						}
						.iconzuozhe:before{
							font-size:36rpx;
						}
					}
					.news-item:last-child{
						border:0;
					}
				}
				.news-top{
					width:100%;
					height:70rpx;
					background:#fbdcdc;
					box-sizing:border-box;
					padding:0 40rpx;
					line-height:70rpx;
					font-size:30rpx;
					color:#d01515;
				}
				.news-top:before{
					margin-right:16rpx;
					font-size:34rpx;
				}
			}
			.main-content{
				width:100%;
				box-sizing:border-box;
				padding:20rpx 30rpx;
				padding-bottom:30rpx;
				background:#ffffff;
				margin-top:0rpx;
				padding-top:0;
				.item{
					width:100%;
					display:flex;
					margin-top:30rpx;
					.img{
						width:260rpx;
						height:180rpx;
						margin-right:30rpx;
						border-radius:10rpx;
					}
					.right{
						width:calc(100% - 290rpx);
						position:relative;
						.go{
							position:absolute;
							width:160rpx;
							height:60rpx;
							line-height:60rpx;
							text-align:center;
							border-radius:6rpx;
							font-size:28rpx;
							color:#fff;
							background:#1783dd;
							right:20rpx;
							bottom:20rpx;
						}
						.title{
							width:100%;
							display:block;
							line-height:40rpx;
							height:40rpx;
							overflow: hidden;    
						    text-overflow:ellipsis;    
						    white-space: nowrap;
						    font-size:32rpx;
						    color:#444444;
						    margin-top:10rpx;
						}
						.number{
							width:100%;
							display:block;
							line-height:30rpx;
							height:30rpx;
							overflow: hidden;    
						    text-overflow:ellipsis;    
						    white-space: nowrap;
						    font-size:28rpx;
						    color:#666666;
						    margin-top:5rpx;
						}
						.iconfont{
							width:100%;
							display:block;
							line-height:30rpx;
							height:30rpx;
							overflow: hidden;    
						    text-overflow:ellipsis;    
						    white-space: nowrap;
						    font-size:28rpx;
						    color:#666666;
						    margin-top:50rpx;
						}
						.iconfont:before{
							font-size:34rpx;
							margin-right:6rpx;
						}
					}
				}
			}
		}
		.result-box{
			width:100%;
			.menu-box{
				width:100%;
				box-sizing:border-box;
				padding:0 150rpx;
				background:#ffffff;
				display:flex;
				justify-content: space-between;
				border-bottom:1px solid #e6e6e6;
				position:relative;
				.item{
					line-height:70rpx;
					padding:0 40rpx;
					position:relative;
					color:#555555;
					font-size:30rpx;

				}
				.active{
					color:#1783dd;
				}
				.active:after{
					content:'';
					position:absolute;
					width:60%;
					left:20%;
					bottom:4rpx;
					height:6rpx;
					background:#1783dd;
				}
			}
		}
		.search-content{
			width:100%;
			box-sizing:border-box;
			padding:0 30rpx;
			margin-top:30rpx;
			.name{
				display:block;
				line-height:50rpx;
				color:#666666;
				font-size:34rpx;
			}
			.box{
				display:flex;
				box-sizing:border-box;
				width:100%;
				justify-content:space-between;
				flex-wrap:wrap;
				.item{
					margin-top:20rpx;
					padding:0 32rpx;
					height:55rpx;
					line-height:55rpx;
					font-size:26rpx;
					color:#555555;
					border:1px solid #f5f5f5;
					border-radius:30rpx;
				}
				.active{
					background:#1783dd;
					color:#fff;
					border:0;
				}
			}
		}
		.search-top{
			width:100%;
			padding:0 30rpx;
			height:100rpx;
			display:flex;
			justify-content:space-between;
			align-items:center;
			box-sizing:border-box;
			/*border-bottom:1px solid #e6e6e6;*/
			.search-input{
				width:550rpx;
				height:60rpx;
				border-radius:60rpx;
				background:#f4f4f4;
				box-sizing:border-box;
				padding:0 30rpx;
				font-size:28rpx;
				color:#555555;
				line-height:70rpx;
			}
			.text{
				font-size:32rpx;
				color:#1783dd;
			}
		}
	}
</style>
